import {Directive, ElementRef, OnInit, AfterViewInit} from "@angular/core";

@Directive({
  selector: "[app-canvas-bg]"
})
export class CanvasBgDirective implements OnInit, AfterViewInit {
  POINT: number = 35;
  context: any;
  circleArr = [];
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;

  constructor(private canvas: ElementRef) {

  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    this.canvas.nativeElement.width = this.WIDTH;
    this.canvas.nativeElement.height = this.HEIGHT;
    this.context = this.canvas.nativeElement.getContext("2d");
    this.context.strokeStyle = 'rgba(0,0,0,0.2)';
    this.context.strokeWidth = 1;
    this.context.fillStyle = 'rgba(0,0,0,0.1)';
    this.init();


  }

  renderFn(){
    this.canvas.nativeElement.width = this.WIDTH;
    this.canvas.nativeElement.height = this.HEIGHT;
    this.context.strokeStyle = 'rgba(0,0,0,0.2)';
    this.context.strokeWidth = 1;
    this.context.fillStyle = 'rgba(0,0,0,0.1)';
    for(let i =0;i<this.POINT;i++){
      let cir = this.circleArr[i];
      cir.x += cir.sAngle;
      cir.y += cir.eAngle;
      if(cir.x>this.WIDTH) cir.x = 0;
      else if(cir<0)cir.x = this.WIDTH;
      if(cir.y>this.HEIGHT) cir.y = 0;
      else if(cir.y<0) cir.y = this.HEIGHT;
    }
    this.draw();
    requestAnimationFrame(()=>{
      this.renderFn();
    });
  }


  init(){
    for (let i = 0;i<this.POINT;i++){
      this.circleArr.push(new Circle(
        this.randomXY(this.WIDTH),
        this.randomXY(this.HEIGHT),
        this.randomXY(15,2),
        this.randomXY(10,-10)/20,
        this.randomXY(10,-10)/20));
    }
    // console.log(this.circleArr);
    this.draw();
    this.renderFn();
  }

  /**开始绘制**/
  draw(){
    this.context.clearRect(0,0,this.canvas.nativeElement.width,this.canvas.nativeElement.height);
    for (let i = 0;i<this.POINT;i++){
      this.drawCircle(this.circleArr[i]);
    };
    // 绘制两点之间的线
    for(let i=0;i<this.POINT;i++){
      for(let j=0;j<this.POINT;j++){
        if(i + j <this.POINT){
          let a = Math.abs(this.circleArr[i + j].x - this.circleArr[i].x),
            b = Math.abs(this.circleArr[i + j].y - this.circleArr[j].y);
          let lineLen = Math.sqrt(a*a + b*b);
          let c = 1/lineLen * 7 - 0.009;
          let linOpacity = c>0.03?0.03:c;
          if(linOpacity > 0){
            this.drawLine(this.circleArr[i].x,this.circleArr[i].y,this.circleArr[i + j].x,this.circleArr[i + j].y,linOpacity)
          }
        }
      }
    }
  }

  /**随机位置,**/
  randomXY(num,_min?){
    let min = _min||0;
    return Math.floor(Math.random()*(num - min + 1) + min)
  }

  /**绘制圆点**/
  drawCircle(obj:Circle){
    this.context.beginPath();
    this.context.arc(obj.x,obj.y,obj.r,0,2*Math.PI);
    this.context.closePath();
    this.context.fill();
  }

  /**绘制直线**/
  drawLine(x,y,endX,endY,opacity){
    this.context.beginPath();
    this.context.strokeStyle = 'rgba(0,0,0,' + opacity + ')';
    this.context.moveTo(x,y);
    this.context.lineTo(endX,endY);
    this.context.closePath();
    this.context.stroke();
  }


}


/**canva画圆**/
export class Circle {
  x;      //x轴坐标
  y;      //y轴坐标
  r;      //圆形半径
  sAngle;  //起始角，以弧度计
  eAngle;   //结束角，以弧度计。
  constructor(x, y, r, sAngle, eAngle) {
    this.x = x;
    this.y = y;
    this.r = r;
    this.sAngle = sAngle;
    this.eAngle = eAngle;
  }
}

export class Line {
  x;
  y;
  endX;
  endY;
  opacity;

  constructor(x, y, endX, endY,opacity) {
    this.x = x;
    this.y = y;
    this.endX = endX;
    this.endY = endY;
    this.opacity = opacity
  }


}
